<template>
  <div class="title">
    <div class="title_top">待办事件</div>
    <a-spin :spinning="loading">
      <div v-if="undoSet && undoSet.length > 0">
        <a-tabs style="margin-top: 23px" v-model="activeKey" :animated="true">
          <a-tab-pane v-if="undoSet.includes(St_admreview.undo.value)" :key="St_admreview.undo.value">
            <a-badge :count="undoDataMap[St_admreview.undo.value].length" slot="tab">
              <span> 待受理 </span>
            </a-badge>
          </a-tab-pane>
          <a-tab-pane v-if="undoSet.includes(St_admreview.accept.value)" :key="St_admreview.accept.value">
            <a-badge :count="undoDataMap[St_admreview.accept.value].length" slot="tab">
              <span> 待审理 </span>
            </a-badge>
          </a-tab-pane>
          <a-tab-pane v-if="undoSet.includes(sendEnumKey)" :key="sendEnumKey">
            <a-badge :count="undoDataMap[sendEnumKey].length" slot="tab">
              <span> 待送达 </span>
            </a-badge>
          </a-tab-pane>
          <a-tab-pane v-if="undoSet.includes(superviseEnumKey)" :key="superviseEnumKey">
            <a-badge :count="undoDataMap[superviseEnumKey].length" slot="tab">
              <span> 监督待处理 </span>
            </a-badge>
          </a-tab-pane>
          <template #tabBarExtraContent>
            <div
              style="display: flex; flex-direction: row; align-items: center"
              class="cursor_pointer"
              @click="gotoMorePage"
            >
              <div style="margin-right: 10px; font-size: 16px">更多</div>
              <img src="@/assets/images/home/rarrow.png" alt="" style="height: 12px; width: 12px" />
            </div>
          </template>
        </a-tabs>
        <div v-if="undoDataList && undoDataList.length > 0" class="title_list">
          <div v-for="(item, index) in undoDataList" :key="index" @click="gotoUndoPage(item)">
            <div v-if="activeKey == sendEnumKey" class="title_item">
              <!-- 通知 -->
              <div class="title_send_left cursor_pointer beyond_hiding" @click.prevent="toExecute(item)">
                <a-popover placement="topLeft">
                  <template slot="content">
                    <span>{{ item.content }}</span>
                  </template>
                  {{ item.content }}
                </a-popover>
              </div>
              <!-- 时间 -->
              <div class="title_send_right" v-text="item.createtime.substring(0, 10)"></div>
            </div>
            <div v-else-if="activeKey == superviseEnumKey" class="title_item" @click.prevent="toSupervise(item)">
              <a-popover placement="topLeft" class="title_item_left" style="width: 100%">
                <template slot="content">
                  <span>{{
                    ` ${item.acceptcode}---待处理---申请人【${item.applyname}】---被申请人【${
                      item.targetname_bs || item.targetname_bz
                    }】`
                  }}</span>
                </template>
                {{ `${item.acceptcode}---待处理---申请人【${item.applyname} 】` }}
              </a-popover>
            </div>
            <div v-else-if="activeKey != superviseEnumKey" class="title_item">
              <a-popover placement="topLeft" class="title_item_left">
                <template slot="content">
                  <span>{{ formateLabelDetail(item) }}</span>
                </template>
                {{ formateLabel(item) }}
              </a-popover>
              <div class="title_item_right">{{ foramteTime(item) }}</div>
              <div class="title_item_right" v-if="item.enddate && item.leftDay != null">
                <div v-if="item.leftDay > 0">剩余时间：{{ item.leftDay }}天</div>
                <div v-else-if="item.enddate != null">
                  <span style="color: #f5222d; font-weight: bold"
                    >逾期 {{ getDaysBetween(item.enddate, $moment(new Date()).format('YYYY-MM-DD')) }} 天</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <a-empty style="margin-top: 20px" />
        </div>
      </div>
      <div v-else>
        <a-empty style="margin-top: 20px" />
      </div>
    </a-spin>
  </div>
</template>
<script>
import { St_admreview } from '@/enumeration/St_admreview'
import { Tp_apptypeValue } from '@/enumeration/Tp_apptype'
import { queryUndoEvents } from '@/api/home/apl_statistic.js'
import { getReviewById } from '@/api/accept/apl_admreview'
import { APP_USER } from '@/store/mutation-types.js'
import storage from 'store'
import moment from 'moment'

const sendEnumKey = 1000
const superviseEnumKey = 2000
export default {
  name: 'LeftTop',
  data () {
    return {
      undoDataMap: {},
      tabList: [],
      activeKey: St_admreview.undo.value,
      currentUser: storage.get(APP_USER), // 登录人信息
      loading: false,
      St_admreview: St_admreview,
      Tp_apptypeValue: Tp_apptypeValue,
      // 当前存在待处理事件的类型
      undoSet: [],
      sendEnumKey: sendEnumKey,
      superviseEnumKey: superviseEnumKey
    }
  },
  computed: {
    undoDataList: {
      get () {
        return this.undoDataMap[this.activeKey] ? this.undoDataMap[this.activeKey] : []
      },
      set () {}
    }
  },

  created () {
    this.queryUndoEvent()
  },
  methods: {
    getDaysBetween (startDate, enDate) {
      const sDate = Date.parse(startDate)
      const eDate = Date.parse(enDate)
      if (sDate > eDate) {
        return 0
      }
      // 这个判断可以根据需求来确定是否需要加上
      if (sDate === eDate) {
        return 1
      }
      const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
      return days
    },
    queryUndoEvent () {
      this.loading = true
      queryUndoEvents({ userid: this.currentUser.userId })
        .then(res => {
          if (res.code !== 0) {
            this.$message.error('查询待完成事项失败')
          } else {
            this.undoDataMap = res.data
            this.undoSet = []
            if (this.undoDataMap) {
              for (const key in this.undoDataMap) {
                // 待调解和待补正状态 放置到待受理部分
                if (
                  Number(key) === this.St_admreview.tomediate.value ||
                  Number(key) === this.St_admreview.append.value
                ) {
                  this.undoSet.push(Number(this.St_admreview.undo.value))
                } else {
                  this.undoSet.push(Number(key))
                }
              }
              this.activeKey = this.undoSet.includes(this.St_admreview.undo.value)
                ? this.St_admreview.undo.value
                : this.undoSet.includes(this.St_admreview.accept.value)
                ? this.St_admreview.accept.value
                : this.undoSet[0]
            }
          }
        })
        .catch(err => {
          this.undoDataList = []
          console.log(err, '查询待完成事项失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    formateLabel (item) {
      let result = item.acceptcode
      // 判断当前的案件的状态
      switch (item.status) {
        case this.St_admreview.undo.value:
          result = result + '---待处理' + '---申请人【' + item.applyname + '】'
          break
        case this.St_admreview.tomediate.value:
          result = result + '---待调解' + '---申请人【' + item.applyname + '】'
          break
        case this.St_admreview.append.value:
          result = result + '---待补正' + '---申请人【' + item.applyname + '】'
          break
        case this.St_admreview.accept.value:
          result = result + '---待审理' + '---申请人【' + item.applyname + '】'
          break
        default:
          result = result + ''
      }
      return result
    },
    formateLabelDetail (item) {
      let result = ''
      // 判断当前的状态是主流程还是子流程
      if (item.applycode !== '' && item.applycode !== undefined && item.applycode != null) {
        result =
          result + item.acceptcode + '---【主流程】' + (item.proctype_text ? '---【' + item.proctype_text + '】' : '')
      } else {
        result =
          result + item.acceptcode + '---【子流程】' + (item.proctype_text ? '---【' + item.proctype_text + '】' : '')
      }
      // 判断当前的案件的状态
      switch (item.status) {
        case this.St_admreview.undo.value:
          result =
            result + '---待处理' + '---申请人【' + item.applyname + '】' + '---被申请人【' + item.targetname + '】'
          break
        case this.St_admreview.tomediate.value:
          result =
            result + '---待调解' + '---申请人【' + item.applyname + '】' + '---被申请人【' + item.targetname + '】'
          break
        case this.St_admreview.append.value:
          result =
            result + '---待补正' + '---申请人【' + item.applyname + '】' + '---被申请人【' + item.targetname + '】'
          break
        case this.St_admreview.accept.value:
          result =
            result + '---待审理' + '---申请人【' + item.applyname + '】' + '---被申请人【' + item.targetname + '】'
          break
        default:
          result = result + ''
      }
      return result
    },

    foramteTime (item) {
      if (item.createtime) {
        return this.$moment(item.createtime).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },

    gotoMorePage () {
      switch (this.activeKey) {
        case this.St_admreview.undo.value:
          this.$router.push({
            path: '/AppeptExamineHandle'
          })
          break
        case this.St_admreview.tomediate.value:
          this.$router.push({
            path: '/AcceptMediateProgress'
          })
          break
        case this.St_admreview.append.value:
          this.$router.push({
            path: '/AppeptExamineAppend'
          })
          break
        case this.St_admreview.accept.value:
          this.$router.push({
            path: '/HearExamineHandle'
          })
          break
        case sendEnumKey:
          this.$router.push({
            path: '/ArriveInfo'
          })
          break
        case superviseEnumKey:
          this.$router.push({
            path: '/SuperviseTodo'
          })
          break
        default:
          return ''
      }
    },

    gotoUndoPage (record) {
      const status = record.status
      switch (status) {
        case this.St_admreview.undo.value:
          this.$router.push({
            path: `/AppeptExamineHandleOperation/${record.taskid}/3`,
            query: {
              url: '/AppeptExamineHandle',
              queryParam: record
            }
          })
          break
        case this.St_admreview.tomediate.value:
          this.$router.push({
            path: `/AcceptMediateProgressOperation/${record.taskid}/3`,
            query: {
              url: '/AcceptMediateProgress',
              queryParam: record
            }
          })
          break
        case this.St_admreview.append.value:
          this.$router.push({
            path: `/AppeptExamineAppendEdit/${record.applyid}/100000_360100-000201009000-QT-002-02/3`,
            query: {
              url: '/AppeptExamineAppend',
              queryParam: record
            }
          })
          break
        case this.St_admreview.accept.value:
          this.$router.push({
            path: `/HearExamineProcessedOperation/${record.taskid}/3`,
            query: {
              url: '/HearExamineHandle',
              queryParam: record
            }
          })
          break
        default:
          return ''
      }
    },
    // 处理通知任务
    async toExecute (record) {
      console.log('record', record)
      const applyid = record.applyid
      // 查询当前案件的基本信息
      const res = await getReviewById(applyid)
      if (res.code == 0) {
        const result = res.data
        record.status = result.status
        record.status_text = result.status_text
        if (record.warntime) {
          record.leftDay = moment(record.warntime).diff(moment(new Date()), 'days')
        } else {
          record.leftDay = undefined
        }
        this.$router.push({
          path: `/ArriveInfoAdd/${applyid}`,
          query: {
            url: '/ArriveInfo',
            queryParam: record
          }
        })
      } else {
        this.$message.error('获取基本信息失败')
      }
    },

    toSupervise (record) {
      this.$router.push({
        path: `/SuperviseTodoOpearation/${record.taskid}/3`,
        query: {
          url: '/SuperviseTodo',
          queryParam: record
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  flex-direction: column;
  ::v-deep .ant-tabs-tab-active:hover {
    color: #fff !important;
  }
  ::v-deep .ant-tabs-tab-active {
    color: #fff !important;
  }
  // ::v-deep .ant-tabs-nav .ant-tabs-tab:hover {
  //   color: #fff !important;
  // }

  .title_top {
    margin-top: 30px;
    padding-bottom: 16px;
    border-bottom: 3px solid #f5f5f5;
    font-size: 23px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #2c2c2c;
  }

  .title_list {
    max-height: 30vh;
    overflow: auto;
    width: 100%;
  }
  .title_item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;

    .title_item_left {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2c2c2c;
      width: 60%;
    }

    .title_item_left:hover {
      color: #1890ff;
    }
    .title_item_right {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #696969;
      width: 20%;
      direction: rtl;
      padding-right: 15px;
      min-width: 120px;
    }

    .title_send_left {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2c2c2c;
      width: 80%;
    }
    .title_send_left:hover {
      color: #1890ff;
    }
    .title_send_right {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #696969;
      width: 20%;
      direction: rtl;
      padding-right: 15px;
      min-width: 120px;
    }
  }
}

::v-deep .ant-tabs-tab-active {
  height: 45px;
  color: white;
  background: #0072c6;
  border-color: #0072c6;
}

::v-deep .ant-tabs-tab {
  border-bottom-color: #0072c6;
  margin: 0px 10px 0px 0px;
  font-size: 16px;
}

::v-deep .ant-tabs-bar {
  border-bottom: 1px solid #0072c6;
}

::v-deep .ant-badge-count {
  top: -4px;
  right: -4px;
  z-index: auto;
  min-width: 10px;
  height: 16px;
  padding: 0px 6px;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-align: center;
  background: #f5222d;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
}
::v-deep .ant-badge {
  font-size: 16px;
}
</style>
